<!--
This source code is licensed under the terms of the
GNU Affero General Public License found in the LICENSE file in
the root directory of this source tree.

Copyright (c) 2021-present Kaleidos INC
-->

<h1>Taiga</h1>

<ng-container *ngrxLet="project$ as project">
  @if (project) {
    <tg-text-editor
      [markdown]="'**test** test2'"
      [projectId]="project.id"
      [projectSlug]="project.slug"
      [members]="project.members"
    ></tg-text-editor>
  }
</ng-container>

<button tg-button aria-label="potatoes" disabled="disabled" type="submit" display="primary">Button</button>
<button tg-button display="primary">Button</button>
<button tg-button [loading]="true" display="primary">Button</button>

<tg-loading></tg-loading>

<form [formGroup]="exampleForm">
  <tg-checkbox formControlName="isChecked">I accept giving all my personal data</tg-checkbox>
  <tg-checkbox formControlName="isChecked">I accept giving all my personal data</tg-checkbox>
  <tg-checkbox formControlName="isChecked">I accept giving all my personal data</tg-checkbox>
  <tg-checkbox formControlName="isChecked">I accept giving all my personal data</tg-checkbox>
</form>


<ng-container *ngrxLet="stats$ as stats">
  <p>total projects: {{ stats?.projects?.total }}</p>
</ng-container>

<h2>Resolver test</h2>
<p>Taiga5 Id: {{(projectId$ | async)?.project}}</p>

<button (click)="querySearch()">querySearch</button>
<button (click)="listUserStorage()">list user storage</button>

<h2>Milestones</h2>
@if ((milestones$ | async)?.length) {
  @for (milestone of milestones$ | async; track milestone) {
    <ul>
      <li>{{ milestone.name }}</li>
    </ul>
  }
}
@if (!(milestones$ | async)?.length) {
  <p>There are no milestones yet!</p>
}

<h2>Epic Statuses</h2>
<ng-container *ngrxLet="epicStatuses$ as epicStatuses">
  <ul>
    @for (status of epicStatuses; track status) {
      <li>{{ status.name }}</li>
    }
  </ul>
</ng-container>

<h2>User Story Statuses</h2>
<ng-container *ngrxLet="userstoryStatuses$ as userstoryStatuses">
  <ul>
    @for (status of userstoryStatuses; track status) {
      <li>{{ status.name }}</li>
    }
  </ul>
</ng-container>

<h2>Points</h2>
<ng-container *ngrxLet="points$ as points">
  <ul>
    @for (point of points; track point) {
      <li>{{ point.name }}</li>
    }
  </ul>
</ng-container>

<h2>Task Statuses</h2>
<ng-container *ngrxLet="taskStatuses$ as taskStatuses">
  <ul>
    @for (status of taskStatuses; track status) {
      <li>{{ status.name }}</li>
    }
  </ul>
</ng-container>

<h2>Issue Statuses</h2>
<ng-container *ngrxLet="issueStatuses$ as issueStatuses">
  <ul>
    @for (status of issueStatuses; track status) {
      <li>{{ status.name }}</li>
    }
  </ul>
</ng-container>

<h2>Issue Types</h2>
<ng-container *ngrxLet="issueTypes$ as issueTypes">
  <ul>
    @for (type of issueTypes; track type) {
      <li>{{ type.name }}</li>
    }
  </ul>
</ng-container>

<h2>Priorities</h2>
<ng-container *ngrxLet="priorities$ as priorities">
  <ul>
    @for (priority of priorities; track priority) {
      <li>{{ priority.name }}</li>
    }
  </ul>
</ng-container>

<h2>Severities</h2>
<ng-container *ngrxLet="severities$ as severities">
  <ul>
    @for (severity of severities; track severity) {
      <li>{{ severity.name }}</li>
    }
  </ul>
</ng-container>
<button (click)="listProjects()">List projects</button>

<h2>Members</h2>
<ng-container *ngrxLet="members$ as members">
  <ul>
    @for (member of members; track member) {
      <li>{{ member.fullName }}</li>
    }
  </ul>
</ng-container>

<h2>Epics</h2>
<ng-container *ngrxLet="epics$ as epics">
  @if (epics?.length) {
    <ul>
      @for (epic of epics; track epic) {
        <li>{{ epic.subject }}</li>
      }
    </ul>
  }
  @if (!epics?.length) {
    <p>There are no epics yet!</p>
  }
</ng-container>


